<template>
  <!-- 柱状图瑰图图 -->
  <div id="main" ref="pieEchart" class="pieEchart" style="width: 100%; height: 100%" />
</template>

<script>
// import * as echarts from 'echarts'
export default {
  name: 'PieEchart',
  data() {
    return {
      property: 'value'
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      //   准备好DOM 初始化 echart 实例
      //   var myChart = this.$echarts.init(document.getElementById('main'))
      // 同一个页面使用多次会出现数据覆盖的问题 只会显示一个页面 解决方法使用ref
      const myChart = this.$echarts.init(this.$refs.pieEchart)
      //   绘制图标
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        color: ['#2f89cf'],
        grid: {
          left: '0%',
          top: '10px',
          right: '0%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['旅游行业', '教育培训', '游戏行业', '医疗行业', '电商行业', '社交行业', '金融行业'],
            axisTick: {
              alignWithLabel: true
            },
            // 设置x轴标签文字样式
            // x轴的文字颜色和大小
            axisLabel: {
              color: 'rgba(255,255,255,.6)',
              fontSize: '12'
            },
            //  x轴样式不显示
            axisLine: {
              show: false
              // 如果想要设置单独的线条样式
              // lineStyle: {
              //    color: "rgba(255,255,255,.1)",
              //    width: 1,
              //    type: "solid"
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // y 轴文字标签样式
            axisLabel: {
              color: 'rgba(255,255,255,.6)',
              fontSize: '12'
            },
            // y轴线条样式
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
                // width: 1,
                // type: "solid"
              }
            },
            // y 轴分隔线样式
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
              }
            }
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            // 修改柱子宽度
            barWidth: '35%',
            // x轴中更换data数据
            data: [200, 300, 300, 900, 1500, 1200, 600],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5
            }
          }
        ]
      })
      // 监听 window窗口大小变化的事件 自适应
      window.onresize = function() {
        // console.log('屏幕变化了')
        myChart.resize()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// .pieEchart {
//   width: 100%;
//   height: 100%;
// }
</style>

